<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path d="M50 0C22.385 0 0 22.385 0 50s22.385 50 50 50 50-22.385 50-50S77.615 0 50 0ZM17.095 48.256l-.822-7.797.36-11.29a.957.957 0 0 1 .284-.655c.19-.19.476-.271.708-.284a3.552 3.552 0 0 1 3.425 3.65l-.182 5.59c-.002.053.02.1.026.15.005.052-.006.1.007.152l1.011 4.093a4.181 4.181 0 0 0-.697.556 4.173 4.173 0 0 0 0 5.894l7.243 7.241a1.108 1.108 0 0 0 1.571 0 1.11 1.11 0 0 0 0-1.571l-7.24-7.241a1.947 1.947 0 0 1 0-2.752 1.947 1.947 0 0 1 2.75 0l6.302 6.307c.03.029.066.039.097.064a1.046 1.046 0 0 0 .394.204c.039.011.068.034.108.041l2.48.429a4.34 4.34 0 0 1 2.324 1.201l4.15 4.149a4.321 4.321 0 0 1 1.27 2.961l.15 6.71-13.466.143-.053-.37a9.572 9.572 0 0 0-2.681-5.322l-7.009-7.01a8.717 8.717 0 0 1-2.51-5.243Zm26.657 34.133-14.94.16h-.027a2.56 2.56 0 0 1-2.557-2.53l-.097-9.004a2.56 2.56 0 0 1 2.53-2.585l14.939-.16h.028a2.559 2.559 0 0 1 2.555 2.53l.097 9.004a2.558 2.558 0 0 1-2.528 2.585Zm7.88-33.377h-3.266a2.48 2.48 0 0 1-2.478-2.478V44.1a14.283 14.283 0 0 1-3.044-1.255l-1.712 1.722a2.461 2.461 0 0 1-1.755.722 2.462 2.462 0 0 1-1.756-.722l-2.31-2.322a2.456 2.456 0 0 1-.723-1.745c0-.666.256-1.289.722-1.755l1.712-1.722a14.79 14.79 0 0 1-1.256-3.034h-2.422a2.49 2.49 0 0 1-2.478-2.489v-3.255a2.49 2.49 0 0 1 2.478-2.488h2.422c.31-1.056.722-2.078 1.256-3.034l-1.712-1.722a2.462 2.462 0 0 1-.722-1.756 2.5 2.5 0 0 1 .722-1.755l2.311-2.311c.933-.933 2.567-.933 3.511 0l1.712 1.722a14.286 14.286 0 0 1 3.044-1.256v-2.433a2.48 2.48 0 0 1 2.478-2.478h3.267a2.48 2.48 0 0 1 2.477 2.478v2.433c1.067.3 2.078.723 3.045 1.256l1.711-1.722c.945-.933 2.578-.933 3.511 0l2.311 2.31a2.5 2.5 0 0 1 .723 1.756 2.46 2.46 0 0 1-.723 1.756l-1.711 1.722c.533.956.945 1.978 1.256 3.034h2.421a2.49 2.49 0 0 1 2.478 2.488V31.5a2.49 2.49 0 0 1-2.478 2.49h-2.421a14.787 14.787 0 0 1-1.256 3.033l1.711 1.722a2.46 2.46 0 0 1 .723 1.755 2.5 2.5 0 0 1-.723 1.756l-2.31 2.31a2.462 2.462 0 0 1-1.756.723 2.462 2.462 0 0 1-1.756-.722l-1.711-1.722A14.29 14.29 0 0 1 54.11 44.1v2.434a2.48 2.48 0 0 1-2.477 2.478Zm22.14 31.01a2.56 2.56 0 0 1-2.557 2.529h-.027l-14.941-.16a2.56 2.56 0 0 1-2.53-2.585l.098-9.005a2.56 2.56 0 0 1 2.557-2.529h.028l14.94.16a2.56 2.56 0 0 1 2.528 2.584l-.096 9.006Zm9.132-31.764a8.724 8.724 0 0 1-2.508 5.243l-7.009 7.01a9.566 9.566 0 0 0-2.68 5.326l-.054.367-13.467-.145.15-6.708a4.314 4.314 0 0 1 1.27-2.962l4.15-4.149a4.347 4.347 0 0 1 2.328-1.202l2.476-.428c.039-.007.069-.03.107-.04a1.044 1.044 0 0 0 .394-.205c.031-.025.068-.035.097-.064l6.302-6.307a1.948 1.948 0 0 1 2.752 0 1.947 1.947 0 0 1 0 2.752l-7.242 7.241a1.11 1.11 0 0 0 .786 1.897c.285 0 .57-.109.786-.326l7.242-7.241a4.173 4.173 0 0 0 0-5.894 4.18 4.18 0 0 0-.697-.556l1.011-4.093c.013-.051.001-.1.007-.151.006-.051.026-.098.026-.151l-.182-5.587c-.06-1.95 1.478-3.59 3.413-3.654a.942.942 0 0 1 .72.284.96.96 0 0 1 .284.651l.36 11.297-.822 7.795Z" data-follow-fill="#0173D7" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Vector_88h8d63h extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
